<template>
  <view class="container">
    <TopBar :options="optionTopBar"></TopBar>
    <login-bar></login-bar>
    <view class="swiper-margin" v-if="carouselImageData.carouselImageList.length !== 0">
      <uni-swiper-dot
        :info="carouselImageData.carouselImageList"
        :current="carouselImageData.current"
        mode="default"
        bottom="16"
        :dotsStyles="{height:'14px', height: '14px'}"
        field="content">
      </uni-swiper-dot>
      <swiper
        @change="change"
        class="swiper introduce_img"
        circular
        autoplay>
        <swiper-item class="swiper-item" v-for="(item, index) in carouselImageData.carouselImageList" :key="index">
          <image
            class="introduce_img"
            style="width: 100%; height: 100%"
            mode="aspectFill"
            :src="item.imageUrl"
            @click="JumpPage(item.jumpAddress)"></image>
        </swiper-item>
      </swiper>
      <view class="dots-box">
        <view class="dots-item" v-for="(item, index) in carouselImageData.carouselImageList" :key="index" :class="index === carouselImageData.current? 'active' : ''"></view>
      </view>
    </view>
    <view class="tab_nav">
      <view class="navTitle" v-for="category in categoryList" :key="category.categoryNo" :class="category.categoryNo === (currentType.categoryNo) ? 'active' : ''" @click="changeCategoryType(category)">
        <view class="title_tabs">
          {{category.categoryName}}
        </view>
      </view>
    </view>
    <view class="events-container" v-if="eventsInfo.list.length">
      <view class="list-item" direction="row" v-for="info in eventsInfo.list" :key="info.id">
        <EventsInfo :item="info" :type="currentType.source" @timeup="timeup"></EventsInfo>
      </view>
    </view>
    <view style="text-align: center;padding: 20rpx 12rpx; color: #666">{{ reloadDataText }}</view>
    <view class="notice-box" v-if="nearEvents.eventsId" @click="gotoPage(`/events/eventsResult?id=${nearEvents.eventsOrderId}`)">
      <view style="flex:1" class="u-line-1">{{ nearEvents.eventsName }}</view>
      <view style="padding-left: 20rpx" @click="gotoPage(`/events/eventsResult?id=${nearEvents.eventsOrderId}`)">查看</view>
    </view>
    <view class="back-top" :class="isSHowGoTop ? 'ani' : ''" @click="gotoTop">
      <image src="https://img.qumoyugo.com/img/58NWBN5858IDI8CCXE8W1710213625725.png" style="width:100%;height:100%"></image>
    </view>
  </view>
</template>
<script setup>
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom, onShareAppMessage, onShow } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'
import { TOKEN, ACTIVITY_ORDER_INFO } from '@/assets/js/config.js'
import EventsInfo from '@/components/list/eventsInfo'
import TopBar from '@/components/navBar/topBar'
import { storage } from '@/utils/utils'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const carouselImageData = ref({
  carouselImageList: [],
  current: 0
})
const reloadDataText = ref('加载中')
const nearEvents = ref({
  name: '',
  id: ''
})
const optionTopBar = ref({
  title: '品客活动',
  backgroundColor: 'transparent'
})
const eventsInfo = ref({
  page: 0,
  total: -1,
  list: [],
  more: true
})
const isSHowGoTop = ref(false)
const categoryList = ref([])
const currentType = ref({
  categoryName: '热门',
  categoryNo: '1',
  source: 'events'
})
onPageScroll((e) => {
  const opacity = Math.min(40, e.scrollTop)
  optionTopBar.value = {
    title: '品客活动',
    backgroundColor: `rgba(255,255,255,${opacity / 40})`
  }
  if (e.scrollTop > 500) {
    isSHowGoTop.value = true
  } else {
    isSHowGoTop.value = false
  }
})
onShareAppMessage(() => {
  return {
    title: '参与活动，释放「你」的社交天性',
    path: 'pages/eventsList',
    imageUrl: ''
  }
})
const JumpPage = (param) => {
  if (param.indexOf('http') !== -1) {
    jumpH5(param)
  } else {
    uni.navigateTo({
      url: param
    })
  }
}
const gotoTop = () => {
  uni.pageScrollTo({
    scrollTop: 0
  })
}
// 跳转H5
const jumpH5 = (url) => {
  if (url.indexOf('http') === -1) {
    uni.navigateTo({
      url,
      fail: () => {
        uni.switchTab({
          url
        })
      }
    })
  } else {
    uni.navigateTo({
      url: '/activity/webUrl?url=' + encodeURIComponent(url)
    })
  }
}
const gotoPage = (url) => {
  uni.navigateTo({
    url
  })
}
onLoad(() => {
  // eventsInfo.value.list = []
  $https({
    url: '/app/eventsInfo/type/list',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      categoryList.value = res.data
    }
  })
  getCarouselImage()
  getInitData()
})
onShow(() => {
  // 搜索刚下单是活动并更改状态
  const orderInfo = storage.get(ACTIVITY_ORDER_INFO)
  if (orderInfo) {
    eventsInfo.value.list.forEach(item => {
      if (item.id === orderInfo.id) {
        item.eventsOrderId = orderInfo.eventsOrderId
        item.timeStatus.status = 1
        return false
      }
    })
    storage.remove(ACTIVITY_ORDER_INFO)
  }
  // 判断是否加载提示
  if (storage.get(TOKEN)) {
    getEnrollLatest()
  }
})
// 最近待参与的活动订单详情
const getEnrollLatest = () => {
  $https({
    url: '/app/eventsInfo/enroll/latest',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      nearEvents.value = res.data
    }
  })
}
// 下拉刷新，请求第一页
onPullDownRefresh(() => {
  eventsInfo.value.page = 0
  $https({
    url: '/app/eventsInfo/type/list',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      categoryList.value = res.data
    }
  })
  getInitData(true)
  getCarouselImage()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 500)
})
// 上拉加载
onReachBottom(() => {
  if (eventsInfo.value.more) {
    console.log('请求了数据', eventsInfo.value.page)
    getInitData()
  }
})
const change = e => {
  carouselImageData.value.current = e.detail.current
}
// 获取轮播图数据
const getCarouselImage = () => {
  $https({
    url: '/bannerSet/available/list',
    type: '',
    method: 'get',
    data: { location: 'events_index' }
  }).then(res => {
    if (res.code === 0) {
      carouselImageData.value.carouselImageList = res.data
    }
  })
}
const getInitData = (flag) => {
  reloadDataText.value = '加载中...'
  if (currentType.value.source === 'events') {
    getEventsData(flag)
  }
  if (currentType.value.source === 'activity') {
    getActivityData(flag)
  }
}
const changeCategoryType = (category) => {
  if (currentType.value.categoryNo === category.categoryNo) return
  currentType.value = category
  eventsInfo.value.page = 0
  getInitData(true)
}
// 获取活动列表数据
const getEventsData = (flag) => {
  if (flag) {
    eventsInfo.value.list = []
    eventsInfo.value.total = 0
  }
  $https({
    url: '/app/eventsInfo/page/list',
    type: '',
    method: 'get',
    data: {
      page: eventsInfo.value.page + 1,
      eventsType: currentType.value.categoryNo
    }
  }).then(res => {
    if (res.code === 0) {
      eventsInfo.value.list.push(...res.data.items)
      eventsInfo.value.total = res.data.pagination.total_record
      eventsInfo.value.page = res.data.pagination.page
      eventsInfo.value.more = res.data.pagination.more
      reloadDataText.value = res.data.pagination.more ? '加载中...' : '没有更多了'
    }
  })
}
const getActivityData = (flag) => {
  if (flag) {
    eventsInfo.value.list = []
    eventsInfo.value.total = 0
  }
  $https({
    url: '/activityInfo/page/list',
    type: '',
    method: 'get',
    data: {
      page: eventsInfo.value.page + 1
    }
  }).then(res => {
    if (res.code === 0) {
      eventsInfo.value.list.push(...res.data.items)
      eventsInfo.value.total = res.data.pagination.total_record
      eventsInfo.value.page = res.data.pagination.page
      eventsInfo.value.more = res.data.pagination.more
      reloadDataText.value = res.data.pagination.more ? '加载中...' : '没有更多了'
    }
  })
}
const timeup = (id) => {
  // console.log(98766, id)
  eventsInfo.value.list.forEach(item => {
    if (item.id === id) {
      item.timeStatus.status = 3
    }
  })
}
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: url(https://img.qumoyugo.com/img/AD9HI4LYXSPKAE90MORCO1700451358927.png) #FFF8F0 no-repeat top center;
  background-size: 100%;
}
.notice-box {
  position: fixed;
  bottom: 10rpx;
  left: 40rpx;
  right: 40rpx;
  border-radius: 10rpx;
  background: #C9E7E6;
  display: flex;
  line-height: 24rpx;
  font-size: 24rpx;
  color: #000;
  padding: 24rpx 20rpx;
}
.swiper-margin {
  padding: 0 30rpx;
  position: relative;
  .swiper {
    height: 500rpx;
  }
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .dots-box{
    position: absolute;
    left:0;
    right: 0;
    bottom: 32rpx;
    height: 14rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dots-item{
    height: 14rpx;
    width: 14rpx;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.16);
    margin: 0 10rpx;
    &.active{
      background-color: #000;
    }
  }
}
.events-container {
  padding: 20rpx 20rpx 0 20rpx;
  width: 100vw;
  overflow: hidden;
}
.no-data {
  text-align: center;
  color: #999999;
  margin: 100rpx 0;
  .img {
    width: 386rpx;
    height: 326rpx;
    margin-bottom: 20rpx;
  }
}
.tab_nav {
  white-space: nowrap;
  // width: 100%;
  margin-top: 40rpx;
  overflow-y: auto;
  .navTitle {
    height: 42rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 32rpx;
    color: #414141;
    font-weight: bold;
    position: relative;
    padding: 0 12rpx;
    margin-left: 30rpx;
    display: inline-block;
    &.active{
      color: #000;
      &::after{
        content: "";
        position: absolute;
        height: 14rpx;
        border-radius: 100px;
        background: #F39A41;
        left: 0;
        right: 0;
        bottom: 6rpx;
      }
    }
  }
  .title_tabs {
    position: relative;
    z-index: 100;
  }
}
.back-top{
  width: 118rpx;
  height: 118rpx;
  position: fixed;
  bottom: 120rpx;
  right: 20rpx;
  opacity: 0;
  transition: all 0.5s;
  &.ani{
    opacity: 1;
  }
}
:deep(.events-container .uni-countdown__splitor){
  margin: 0;
  font-size: 12px !important;
}
:deep(.events-container .uni-countdown__number){
  width: auto !important;
}
</style>
